<template>
	<view>
		<view class="bg-white mt20 ml20 mr20 u-padding-20 br-10">
			<u-form  ref="uForm">
				<u-form-item label="金额" :border-bottom="false">
					<u-input v-model="a" placeholder="请输入金额"
						:border="true" />
				</u-form-item>
				<u-form-item label="点位" :border-bottom="false">
					<u-input v-model="b" placeholder="请输入点位"
						:border="true" />
				</u-form-item>
			</u-form>
		</view>
		<u-button type="primary" class="ml20 mr20 mt20" :custom-style="{backgroundColor: '#4990fa'}" @click="calculate">计算手续费</u-button>
		<view class="bg-white mt20 ml20 mr20 u-padding-20 br-10">
			<view v-if="status == false" style="min-height: 200rpx;">
				此系统用于金融中介计算手续费专用 自动计算手续费及回款金额 还支持一键复制哦。
			</view>
			<view v-else class="u-padding-20">
				<view>手续费</view>
				<view>金额：{{a}}</view>
				<view>点位：{{b}}</view>
				<view>收取：{{d}}</view>
				<view>回款：{{e}}</view>
			</view>
			<u-button v-if="status == true" type="primary" class="mt20" :custom-style="{backgroundColor: '#4990fa'}" @click="copyContent">复制</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				a:'',
				b:'',
				c:'',
				d:'',
				e:'',
				status:false
			}
		},
		methods: {
			calculate(){
				if(!this.a){
					return this.$u.toast('请输入金额');
				}else if(!this.b){
					return this.$u.toast('请输入点位');
				}else{
					this.c=this.b*0.01;
					//alert(c);
					this.d=this.a*this.c;
					this.d=this.d.toFixed(2);
					
					this.e=this.a-this.d;
					this.e=this.e.toFixed(2);
					
					this.status = true;
				}
			},
			copyContent(){
				uni.setClipboardData({
				  data: "手续费\n金额："+this.a+"\n点位："+this.b+"\n收取："+this.d+"\n回款："+this.e ,
				  success(res) {
				    // 成功后的处理逻辑
				    console.log('已成功复制');
				  },
				  fail(err) {
				    // 失败时的处理逻辑
				    console.error('复制失败', err);
				  }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: url(../../static/images/bg.png) repeat;

		.br-10 {
			border-radius: 10rpx;
		}
	}
</style>